<template>
  <div style="background-color:#f5f5f5;margin:0;padding:0;width:100%">
    <div class="block" style="margin-top:10px;padding: 20px; margin:0 auto;text-align: center">
      <el-select v-model="category" placeholder="请选择" style="width:120px;margin-right:15px;margin-left:95px">
        <el-option
            v-for="item in categorys"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <el-date-picker
          v-model="date"
          align="left"
          type="date"
          placeholder="选择日期"
          popper-class="picker-popper"
          :picker-options="pickerOptions" style="width:180px;margin-right:20px">

      </el-date-picker>
      <el-select v-model="hour" placeholder="请选择" style="width:120px;margin-right:30px">
        <el-option
            v-for="item in time"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <el-button-group>
        <el-button type="primary" @click="previousMoment" style="margin-right:10px">-12h</el-button>
        <el-button type="primary" @click="nextMoment"> +12h</el-button>
      </el-button-group>
      <div style="width:40px;float:right;margin-right:50px">
        <el-button icon="el-icon-pie-chart" @click="showDialog" type="info" circle></el-button>
        <el-dialog
            title="2023年七月累计预报评估分析"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose"
            style="margin-top: 12vh !important;"
        >

          <!-- 使用子组件 -->
          <DialogFooter/>
        </el-dialog>
      </div>
    </div>
    <div class="image-container">
      <div v-if="imgVisible">
        <el-row :visible.sync="imgVisible">
          <el-col :span="7" class="arrow-col">
            <div class="arrow-container" v-if="prehour !== minValue">
              <el-button type="info" icon="el-icon-arrow-left" circle @click="previousImage"></el-button>
            </div>
          </el-col>
          <el-col :span="10" class="image-col">
            <div><img :src="currentImage" alt="Current Image" style="width:100%"></div>
          </el-col>
          <el-col :span="7" class="arrow-col">
            <div class="arrow-container" v-if="prehour !== maxValue">
              <el-button type="info" icon="el-icon-arrow-right" circle @click="nextImage"></el-button>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>
    <div class="block" style="width:80%;margin:0 auto">
      <el-slider
          v-model="prehour"
          :step="step"
          :max="maxValue"
          :min="minValue"
          show-input
          show-stops>
      </el-slider>
    </div>
  </div>
</template>

<script>
import DialogFooter from '@/components/ensembles/index.vue';

export default {
  components: {
    DialogFooter // 注册子组件
  },
  name: 'ensemble',
  data() {
    const that = this
    return {
      dialogVisible: false,
      imgVisible: false,
      dates2: ["0703", "0704", "0711", "0712", "0713", "0720", "0721", "0722", "0724", "0725", "0728", "0729", "0730", "0731"],
      badgeDate: ["2023-07-03", "2023-07-04", "2023-07-11", "2023-07-12", "2023-07-13", "2023-07-20", "2023-07-21", "2023-07-22", "2023-07-24", "2023-07-25", "2023-07-28", "2023-07-29", "02023-07-30", "2023-07-31"],

      pickerOptions: {
        disabledDate(time) {
          // console.log(time)
          return time.getTime() > Date.now();
        },
        cellClassName(date) {

          if (that.badgeDate.includes(that.parseTime(date, '{y}-{m}-{d}'))) {
            // console.log(dateString)
            return 'badge';
          }
        },
        shortcuts: [{
          text: '上次',
          onClick(picker) {
            const targetDate = new Date('2023-07-03'); // 创建一个目标日期对象，指定为2023年7月3日

            picker.$emit('pick', targetDate);
          }
        },]
      },
      date: '',
      time: [{
        value: 8,
        label: '08时'
      }, {
        value: 20,
        label: '20时'
      }],
      categorys: [{
        value: 'rain24',
        label: '日降水'
      }, {
        value: 'tmp',
        label: '温度'
      }, {
        value: 'rh',
        label: '相对湿度'
      }],
      hour: '',
      datetime: '',
      category: 'rain24',
      prehour: 24,
      step: 12,
      minValue: 24,
      maxValue: 72,
      // filePath:[],
      // preImage:'',
      currentImage: '',
      prefix:this.$config.ecImagePath,

      // nextImage:'',
    };
  },
  mounted() {
    this.init()

  }, computed: {},
  methods: {
    init() {
      var d = new Date('2023-07-03');
      var hour = d.getHours()
      d.setMinutes(0)
      d.setSeconds(0)
      if (hour >= 8 && hour < 20) {
        d.setHours(8)

        this.hour = 8
      } else {
        this.hour = 20

        d.setHours(20)
      }
      this.date = d
    },

    // 提取更新日期的方法
    updateDate(currentDate) {
      // this.$nextTick(() => {
      this.date = new Date(currentDate);
      this.hour = currentDate.getHours();
      // });
    },
    previousMoment() {
      // 处理上一时刻按钮点击事件的逻辑
      var currentDate = this.date;
      currentDate.setHours(currentDate.getHours() - 12);
      this.updateDate(currentDate);
    },
    nextMoment() {
      // 处理下一时刻按钮点击事件的逻辑
      var currentDate = this.date;
      currentDate.setHours(currentDate.getHours() + 12);
      this.updateDate(currentDate);

      // console.log(this.hour)
    },
    updateSliderOptions(max, min, step) {
      // 根据需要动态更新 max、min、step 的值
      this.maxValue = max;
      this.minValue = min;
      this.step = step;
    },
    getFileDate(date, fhour) {
      const year = date.getFullYear();
      // console.log(year)
      const month = this.zero(date.getMonth() + 1)
      const day = this.zero(date.getDate())
      const hour = this.zero(fhour)
      // const phour = this.zero(prehour)
      // var dateT=year+month+day+hour+phour
      var dateT = year + month + day + hour
      return dateT
    },
    previousImage() {
      // 实现上一张图片的逻辑，例如更新currentIndex等
      this.prehour = this.prehour - this.step
    },
    nextImage() {
      this.prehour = this.prehour + this.step
    },
    zero(n) {
      return n >= 10 ? n : '0' + n
    },
    showDialog() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      // 在这里可以执行一些关闭前的操作，比如数据重置等
      done(); // 关闭弹窗
    },


  },
  watch: {
    date(newDate, oldDate) {
      const currentDate = new Date(newDate);
      const today = new Date();
      const specifiedDate1 = new Date('2023-07-01 8:00');
      const specifiedDate2 = new Date('2023-07-31 20:00');
      const month = ('0' + (currentDate.getMonth() + 1)).slice(-2); // 获取当前月份，并确保是两位数
      const day = ('0' + currentDate.getDate()).slice(-2); // 获取当前日期，并确保是两位数
      const dateString = month + day; // 将月份和日期拼接成字符串，形如 "MMDD"
      if (currentDate.getTime() > specifiedDate2.getTime()) {
        this.date = new Date('2023-07-31 20:00');

        this.hour = 20;
        this.$message.warning('暂无数据');
      } else if (currentDate.getTime() < specifiedDate1.getTime()) {
        this.date = new Date('2023-07-01 8:00');
        this.hour = 8;
        this.$message.warning('暂无数据');
      } else {
        if (!this.dates2.includes(dateString)) {
          // currentDate 的日期不在 date2 中
          // this.imgVisible = false
          this.$message.warning('暂无数据');
          this.imgVisible = false

          // console.log(this.imgVisible)
        } else {
          // currentDate 的日期在 date2 中
          // this.$message.warning('currentDate 的日期在 date2 中');
          this.datetime = this.getFileDate(this.date, this.hour)
          // console.log(this.datetime)

          this.imgVisible = true


        }
        this.date = newDate

      }
    },
    hour(newHour, oldHour) {
      var currentDate = this.date;

      if ((newHour >= 8 && newHour < 20)) {
        this.hour = 8
        currentDate.setHours(8)
        this.updateDate(currentDate);

      } else {
        this.hour = 20
        currentDate.setHours(20)
        this.updateDate(currentDate);
        // console.log(this.date)

      }
      // this.datetime = this.getFileDate(this.date,this.hour)
    },

    datetime(newdatetime, old) {

      if (this.category == 'tmp') {
        this.currentImage =this.prefix+"ectemp/ECTMP"+ this.datetime + this.prehour.toString().padStart(2, '0') + ".png"
            // require("@/assets/ectmp/ECTMP" + this.datetime + this.prehour.toString().padStart(2, '0') + ".png");

      } else if (this.category == 'rh') {
        this.currentImage = this.prefix+"ecrh/ECRH"+ this.datetime + this.prehour.toString().padStart(2, '0') + ".png"
            // require("@/assets/ecrh/ECRH" + this.datetime + this.prehour.toString().padStart(2, '0') + ".png");

      } else {
        this.currentImage = this.prefix+"ecrain/ECRAIN24" + this.datetime + this.prehour.toString() + ".png"
            // require("@/assets/ecrain/ECRAIN24" + this.datetime + this.prehour.toString() + ".png");
      }


    },
    prehour(newprehour, oldprehour) {
      if (this.category == 'tmp') {
        this.currentImage = this.prefix+"ectmp/ECTMP" + this.datetime + this.prehour.toString().padStart(2, '0') + ".png"
            // require("@/assets/ectmp/ECTMP" + this.datetime + this.prehour.toString().padStart(2, '0') + ".png");

      } else if (this.category == 'rh') {
        this.currentImage = this.prefix+"ecrh/ECRH" + this.datetime + this.prehour.toString().padStart(2, '0') + ".png"
            // require("@/assets/ecrh/ECRH" + this.datetime + this.prehour.toString().padStart(2, '0') + ".png");
      } else {
        this.currentImage = this.prefix+"ecrain/ECRAIN24" + this.datetime + this.prehour.toString() + ".png"
            // require("@/assets/ecrain/ECRAIN24" + this.datetime + this.prehour.toString() + ".png");
      }
    },
    category(newcategory, oldcategory) {
      if (newcategory == 'tmp') {

        this.updateSliderOptions(72, 0, 6)
        this.prehour = 0
        this.currentImage = this.prefix+"ectmp/ECTMP" + this.datetime + this.prehour.toString().padStart(2, '0') + ".png"
            // require("@/assets/ectmp/ECTMP" + this.datetime + this.prehour.toString().padStart(2, '0') + ".png");


      } else if (newcategory == 'rh') {
        this.updateSliderOptions(72, 0, 6)
        this.prehour = 0
        this.currentImage = this.prefix+"ecrh/ECRH" + this.datetime + this.prehour.toString().padStart(2, '0') + ".png"
            // require("@/assets/ecrh/ECRH" + this.datetime + this.prehour.toString().padStart(2, '0') + ".png");
      } else {
        this.updateSliderOptions(72, 24, 12)
        this.prehour = 24
        this.currentImage = this.prefix+"ecrain/ECRAIN24" + this.datetime + this.prehour.toString() + ".png"
            // require("@/assets/ecrain/ECRAIN24" + this.datetime + this.prehour.toString() + ".png");

      }
    },
  },
  parseTime(time, cFormat) {
    if (arguments.length === 0 || !time) {
      return null
    }
    const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
      date = time
    } else {
      if ((typeof time === 'string')) {
        if ((/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        } else {
          time = time.replace(new RegExp(/-/gm), '/')
        }
      }

      if ((typeof time === 'number') && (time.toString().length === 10)) {
        time = time * 1000
      }
      date = new Date(time)
    }
    const formatObj = {
      y: date.getFullYear(),
      m: date.getMonth() + 1,
      d: date.getDate(),
      h: date.getHours(),
      i: date.getMinutes(),
      s: date.getSeconds(),
      a: date.getDay()
    }
    const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
      const value = formatObj[key]
      if (key === 'a') {
        return ['日', '一', '二', '三', '四', '五', '六'][value]
      }
      return value.toString().padStart(2, '0')
    })
    return time_str
  }
}
</script>

<style>
.image-container {
  margin: 0;
  margin: 0 auto;
  height: 630px;
  width: 100%;
  padding: 0px;
  margin-bottom: 0px;

  margin-top: 10px;
}

.arrow-col {
  display: flex;
  height: 630px;

  justify-content: center;
}

.arrow-container {
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
}

.image-col {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.picker-popper .el-date-table .badge::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: skyblue;
  border-radius: 50%;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
